<template>
    <el-main>
        <el-table :data="endusers">
            <el-table-column label="ID">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="User Name">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.username}}</span>
                </template>
            </el-table-column>

            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <el-button
                        size="mini"
                        disabled
                        icon="el-icon-plus"
                        @click="handleAdd(scope.$index)"
                    ></el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);"
                        icon="el-icon-edit"
                    ></el-button>
                    <el-button
                        size="mini"
                        disabled
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="Management Form" :visible.sync="dialogFormVisible" fullscreen>
            <el-form :model="enduserForm" ref="enduserForm" label-position="top">
                <el-form-item label="End User ID" prop="id">
                    <el-input v-model="enduserForm.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="User Name" prop="username">
                    <el-input v-model="enduserForm.username" disabled></el-input>
                </el-form-item>

                <el-form-item label="Role" prop="roleIds">
                    <el-transfer
                        v-model="enduserForm.roleIds"
                        :data="roles"
                        :titles="[this.$t('model.role.all'), this.$t('model.role.select')]"
                        style="height:180px; min-width: 500px;"
                        :props="{key:'id', label: 'name', disabled: 'disabled'}"
                    ></el-transfer>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">{{ $t('button.cancel') }}</el-button>
                <el-button
                    type="primary"
                    @click="dialogFormVisible=false"
                >{{ $t('button.confirm') }}</el-button>
            </div>
        </el-dialog>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `endUserMgmt`,
    data: function() {
        return {
            endusers: [],
            enduserForm: {},
            roles: [],
            dialogFormVisible: false
        };
    },
    mounted: function() {
        Vue.axios
            .get(`/api/admin/enduser/query/listEndUsers`)
            .then(response => {
                //console.log(JSON.stringify(response.data));
                if (response.status === 200) {
                    this.endusers = response.data;
                    return;
                }
                throw error;
            })
            .catch(error => {
                this.$router.push("/ui/login");
            });
    },
    methods: {
        handleAdd(index) {},
        handleEdit(index, row) {
            this.dialogFormVisible = true;

            Vue.axios
                .get(`/api/admin/role/query/listRoles`)
                .then(response => {
                    //console.log(JSON.stringify(response.data));
                    if (response.status === 200) {
                        this.roles = response.data;
                        this.roles.forEach(r=>{
                            r.disabled=true;
                        });
                        return;
                    }
                    throw error;
                })
                .catch(error => {
                    this.$router.push("/ui/login");
                });

            this.enduserForm = row;
            this.enduserForm.roleIds = [];
            row.roles.every(r => {
                this.enduserForm.roleIds.push(r.id);
                return true;
            });
        },
        handleDelete(row) {}
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>
